<script setup lang="ts">
import { ref,onMounted,onUpdated } from 'vue'
import './styles/color.css'
import styles2 from './styles/color.module.css'
let isShow = ref(false);

let showView=()=>{

}

onMounted(()=>{
    if(isShow.value==true){
        showView();
    }
})

onUpdated(()=>{
    if(isShow.value==true){
        showView();
    }
})

let styleC=Math.random()>0.5?styles2.red:styles2.pink;
</script>

<template>
    <div class="hide"><input type="button" :value="`${isShow ? 'hide' : 'show'} StylesImport`" @click="isShow = !isShow"></div>
    <div v-if="isShow">
        <div class="red">red</div>
        <div class="yellow">yellow</div>
        <div class="pink">pink</div>

        <div :class="{yellow:true}">yellow</div>
        <div :class="{yellow:false}">yellow false</div>
        <div :class="[styles2.red]">red</div>
        <div :class="styles2.pink">pink</div>
        <div :class="styleC">red or pink</div>
    </div>
    
</template>

<style scoped></style>